<template>
  <div class="content">
    <div class="shangbox">
      <div class="title">
        我的分润
      </div>
      <div class="shanghezi">
        <div class="shangzuo">
          <div class="row1">
            待提现金额
          </div>
          <div class="row2">
            <div class="qianqian">
              {{acObj.waitCash?acObj.waitCash/100:'0.00'}}
            </div>
            <div class="danwei">
              元
            </div>
          </div>
          <el-button class="btn1"  type="primary"  @click="givememoney">立即提现
          </el-button>
        </div>
        <div class="shangzhong">
          <div class="row1">
            销售金额
          </div>
          <div class="row2">
            <div class="qianqian">
              {{acObj.count?acObj.count/100:'0.00'}}
            </div>
            <div class="danwei">
              元
            </div>
          </div>
        </div>
        <div class="shangyou">
        </div>
      </div>
    </div>
    <div class="tabs">
      <div class="tabitem" :class="acindex==0? 'activeit' : ''" @click="changeit(0)">
        提现记录
      </div>
      <div class="tabitem" :class="acindex==1? 'activeit' : ''" @click="changeit(1)">
        销售金额
      </div>
    </div>
    <div class="ordertable">
      <el-table
        v-if="acindex==0"
        :data="tableData"
        ref="multipleTable"
        style="width: 100%" height="420px"  >
        <el-table-column
          prop="outBatchNo"
          label="名称"
          min-width="120px"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          prop="splitWxMoney"
          label="分润金额（元)"
          align="center"
          min-width="120">
          <template slot-scope="scope">
            <span class="qiancolor">¥{{scope.row.splitWxMoney&&scope.row.splitWxMoney/100||'0.00'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="realWxMoney"  align="center"
          label="提现金额（元) " min-width="120">
          <template slot-scope="scope">
            <span class="qiancolor">¥{{scope.row.realWxMoney&&scope.row.realWxMoney/100||'0.00'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cashRate"  align="center"
          label="手续费（元)" min-width="160">
          <template slot-scope="scope">
            <span class="qiancolor">¥{{scope.row.cashRate&&scope.row.cashRate/100||'0.00'}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="address"  align="center"
          label="申请时间" min-width="160">
          <template slot-scope="scope">
            <span >2025-04-12 12:42:52</span>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="address"  align="center"
          label="状态" min-width="160">
          <template slot-scope="scope">
            <span v-if="scope.row.splitWxStatus == 0" class="color1">申请中</span>
            <span v-else-if="scope.row.splitWxStatus == 1" class="color2">审核成功</span>
            <span v-else-if="scope.row.splitWxStatus == 2" class="color3">审核驳回</span>
            <span v-else-if="scope.row.splitWxStatus == 3" class="color2">已提现</span>
            <span v-else-if="scope.row.splitWxStatus == 4" class="color3">提现失败</span>
            <span v-else class="color3">未提现</span>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-if="acindex==1"
        :data="tableData1"
        ref="multipleTable"
        style="width: 100%" height="420px"  >
        <el-table-column
          prop="orderNo"
          label="订单号"
          width="200px"
          show-overflow-tooltip
          >
        </el-table-column>
        <el-table-column
          prop="detailList"
          label="商品"
          align="center"
          min-width="160">
          <template slot-scope="scope">
            <div class="goodsname" v-for="(item,index) of scope.row.detailList" :key="index">
                <div class="goodsname1">{{item.spuTitle}}</div>
                <div class="num">
                  {{item.orderDetailNumber}}件
                </div>
              </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderMoneyTotal"  align="center"
          label="商品金额（元) " min-width="120">
          <template slot-scope="scope">
            <span class="qiancolor">¥{{scope.row.orderMoneyTotal&&scope.row.orderMoneyTotal/100||'0.00'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="splitMoneyTotal"  align="center"
          label="奖励金额（元)" min-width="120">
          <template slot-scope="scope">
            <span class="qiancolor">¥{{scope.row.splitMoneyTotal&&scope.row.splitMoneyTotal/100||'0.00'}}</span>
          </template>
        </el-table-column>
        
      </el-table>
    </div>
    
  </div>
</template>

<script>
import { mymoney}from '@/api/user' 

export default {
  name: "mymoney",//个人中心 
  data() {
    return {
      acindex:0,
      tableData:[],
      tableData1:[],
      queryParams:{
        openid: '',//ouVYO7QpkDWTosZicESD89qrMdN0
        customerId: '',
        appId: '',//wxaef4ed7d7a1d245e
        splitType: 1,
      },
      acObj:{},

    };
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
   
  },
  methods: {
    async init(){
      var customer=JSON.parse(localStorage.getItem('customer'));
      console.log(customer)
      this.queryParams.openid=localStorage.getItem("openid")||''
       this.queryParams.appId=customer.appId||''
      this.queryParams.customerId=this.$store.state.user.customerId||''
      const res =await mymoney(this.queryParams)
      this.acObj=res.data
      this.tableData=res.data.ordOrderSplitWxLogList
      this.tableData1=res.data.ordOrderSplitLogs

    },
    givememoney(){
      this.$router.push({path:'/personalCenter/mytixian'})
    },
    changeit(num){
      this.acindex = num
    },
  },
  
};
</script>
<style scoped lang="scss">
.content{
  .goodsname{
    // height: 40px;
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
    .goodsname1,.num{
      font-weight: 400;
      font-size: 14px;
      color: #1D2129;
      line-height: 22px;
      text-align: left;
    }
  }
  .shangbox{
    width: 100%;
    height: 270px;
    border-radius: 16px 16px 0px 0px;
    background-image: url('../../assets/images/fenrun1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 16px;
    box-sizing: border-box;
    .title{
      font-weight: bold;
      font-size: 24px;
      color: #333333;
      text-align: left;
      margin-bottom: 16px;
    }
    .shanghezi{
      display: flex;
      align-items: flex-start;
      width: 730px;
      height: 186px;
      box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.07);
      border-radius: 16px 16px 16px 16px;
      background-image: url('../../assets/images/fenrun2.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 16px 0;
      box-sizing: border-box;
      .shangzuo,.shangzhong{
        margin-top: 10px;
        .row1{
          font-weight: bold;
          font-size: 20px;
          color: #333333;
          text-align: left;
          margin-bottom: 16px;
        }
        .row2{
          display: flex;
          align-items: flex-end;
          color: #DB4444;
          text-align: left;
          margin-bottom: 16px;
          .qianqian{
            font-size: 36px;
            font-weight: bold;
            margin-right: 4px;
          }
          .danwei{
            margin-top: 10px;
            font-weight: 400;
            font-size: 14px;
          }
        }
        .btn1{
          width: 108px;
          height: 32px;
          background: #0672F9;
          border-radius: 6px 6px 6px 6px;
          padding: 0;
        }
        .btn1:hover{
          opacity: 0.5;
        }
      }
      .shangzuo{
        margin-left: 24px;
      }
      .shangzhong{
        margin-left: 120px;
      }
      .shangyou{
        margin-left: 89px;
        width: 118px;
        height: 150px;
        background-image: url('../../assets/images/fenrun3.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      }
    }
    
  }
  .tabs{
    display: flex;
    align-items: center;
    margin: 16px;
    
    .tabitem{
      font-weight: bold;
      font-size: 20px;
      color: #333333;
      line-height: 40px;
      text-align: left;
      border: none;
      margin-right: 40px;
      cursor: pointer;
    }
    .activeit{
      color: #0672F9 !important;
      border-bottom: 2px solid #0672F9;
    }
  }
  .ordertable{
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    
    .qiancolor{
      font-weight: 400;
      font-size: 14px;
      color: #EB5757;
    }
    .color1{
      color: #F2994A;

    }
    .color2{
      color: #34C759;
    }
    .color3{
      color: #4F4F4F;
    }
  }
}
</style>
